import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group'
import {
  BrowserRouter as Router,
  Route,
  Link,
  withRouter
} from 'react-router-dom'

import withTransition from './withTransition'

import './style.css'

const Comp1 = withTransition(() => {
  return (
    <div style={{
      position: 'absolute', 
      width: '200px', 
      height: '200px',
      background: 'red'
    }}>comp1</div>
  )
})


const Comp2 = withTransition(() => {
  return (
    <div style={{
      position: 'absolute', 
      width: '200px', 
      height: '200px',
      background: 'green'
    }}>comp2</div>
  )
})

const Comp3 = withTransition(() => {
  return (
    <div style={{
      position: 'absolute', 
      width: '200px', 
      height: '200px',
      background: 'blue'
    }}>comp3</div>
  )
})

@withRouter
class App extends Component {
  state = {
    show: true
  }

  handleClick = () => {
    this.setState(state => ({show: !state.show}))
  }

  render() {
    return (
      <div style={{position: 'relative'}}>
        <ul>
          <li>
            <Link to="/comp1">comp1</Link>
          </li>
          <li>
            <Link to="/comp2">comp2</Link>
          </li>
          <li>
            <Link to="/comp3">comp3</Link>
          </li>
        </ul>
        {/* <Route path="/comp1" children={props => <Comp1 {...props}></Comp1>}></Route>
        <Route path="/comp2" children={props => <Comp2 {...props}></Comp2>}></Route>
        <Route path="/comp3" children={props => <Comp3 {...props}></Comp3>}></Route> */}
        <Comp3 path="/comp3"></Comp3>
        <Comp2 path="/comp2"></Comp2>
        <Comp1 path="/comp1"></Comp1>
      </div>
    )
  }
}


export default App